<template>
	<view class="common-calendar">
		<view 
			class="wrap"
			v-for="(it_card, in_card) in cardList"
			:key="in_card"
		>
			<view class="common-calendar_header">{{it_card.date.year}}年{{it_card.date.month}}月</view>
			<view class="common-calendar_box">
				<view class="common-calendar_weeks">
					<view class="common-calendar_weeks_day">
						<text class="common-calendar_weeks_day_text">日</text>
					</view>
					<view class="common-calendar_weeks_day">
						<text class="common-calendar_weeks_day_text">一</text>
					</view>
					<view class="common-calendar_weeks_day">
						<text class="common-calendar_weeks_day_text">二</text>
					</view>
					<view class="common-calendar_weeks_day">
						<text class="common-calendar_weeks_day_text">三</text>
					</view>
					<view class="common-calendar_weeks_day">
						<text class="common-calendar_weeks_day_text">四</text>
					</view>
					<view class="common-calendar_weeks_day">
						<text class="common-calendar_weeks_day_text">五</text>
					</view>
					<view class="common-calendar_weeks_day">
						<text class="common-calendar_weeks_day_text">六</text>
					</view>
				</view>
				
				<view 
					class="common-calendar_weeks"
					v-for="(it_weeks, in_weeks) in it_card.weeks"
					:key="in_weeks"
				>
					<view 
						class="common-calendar_weeks_day"
						:class="{disable: it_week.disable, active: choosedDay===it_week.full && !it_week.disabled }"
						v-for="(it_week, in_week) in it_weeks"
						:key="in_week"
						@click="handleChooseDay(it_week)"
					>
						<text class="dack sts" v-if="choosedDay==it_week.full && !it_week.disabled">{{status}}</text>
						<text class="common-calendar_weeks_day_text">{{it_week.day}}</text>
						<!-- <text class="common-calendar_weeks_day_text">{{it_week.day + '/' + it_week.month}}</text> -->
						<text class="dack today" v-if="today == it_week.full">今天</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import calendar from './util.js'
	export default {
		props: {
			status: {
				type: String,
				default() {
					return ''
				}
			},
			startDate: {
				default() {
					return new Date()
				}
			},
			addDays: {
				type: [Number,String],
				default() {
					return 0
				}
			},
			choosedDay: {
				type: [String,Number],
				default(){
					return ''
				}
			}
		},
		data() {
			return {
				cardList: [],
				// choosedDay: ''
			};
		},
		mounted() {
			this.getCalendar();
		},
		computed: {
			today() {
				let dateObj = calendar.getDateObj()
				return dateObj.year+'-'+dateObj.month+'-'+dateObj.day
			},
			startDateDie() {
				let dateObj = calendar.getDateObj()
				return dateObj.full
			}
		},
		methods: {
			getCalendar() {
				let dateObj = calendar.getDateObj(this.startDate)
				// #ifdef MP-WEIXIN
				this.choosedDay = dateObj.year+'-'+dateObj.month+'-'+dateObj.day
				// #endif
				let endDateDie = calendar.getBeforeDate(this.startDateDie, this.addDays)
				this.cardList = calendar.getCalendar(this.startDate, this.addDays, endDateDie)
			},
			handleChooseDay(item) {
				if (!item.disable) {
					// this.choosedDay = item.full
					this.$emit('handleChooseDay', item)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.common-calendar {
	background-color: #fff;
	.common-calendar_header {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 32rpx;
		border-bottom: 1px solid #EBEBEB;
	}
	.common-calendar_box {
		.common-calendar_weeks {
			display: flex;
			justify-content: space-evenly;
			.common-calendar_weeks_day {
				height: 92rpx;
				width: 92rpx;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				position: relative;
				transition: all 0.1s ease;
				&.active {
					height: 92rpx;
					width: 92rpx;
					background-color: #00B4FF;
					border-radius: 12rpx;
					overflow: hidden;
					color: #fff;
					/* #ifdef MP-WEIXIN */
					font-size: 30rpx;
					/* #endif */
					/* #ifdef H5 */
					font-size: 20rpx;
					/* #endif */
					.common-calendar_weeks_day_text {
						color: inherit;
						font-size: inherit;
					}
					.dack {
						&.today {
							color: inherit;
						}
					}
				}
				&.disable {
					.common-calendar_weeks_day_text {
						color: #dedede;
					}
				}
				.common-calendar_weeks_day_text {
					font-size: 36rpx;
					color: inherit;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
				}
				/* #ifdef MP-WEIXIN */
				.dack {
					font-size: 20rpx;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					&.sts {
						top: 0;
					}
					&.today {
						bottom: 0;
						color: #00b4ff;
					}
				}
				/* #endif */
			}
		}
	}
}
</style>
